<template>
  <div class="app-container">
    <!-- 添加或修改入伙登记对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body v-drag-fullscreen>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="form-flex">
        <fieldset style="margin-top: -22px">
          <legend>资产信息</legend>
            <el-row :gutter="20">
              <el-col :span="6" :xs="24">
                <el-form-item label="所属小区" prop="communityId">
                  <el-select v-model="form.communityId" placeholder="请选择所属小区" @change="getBuildingData" :disabled=disabled>
                    <el-option
                      v-for="dict in communityOptions"
                      :key="dict.id"
                      :label="dict.communityName"
                      :value="dict.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6" :xs="24">
                <el-form-item label="所属楼栋" prop="floorId">
                  <el-select v-model="form.floorId" placeholder="请选择所属楼栋" @change="getUnitList" :disabled=disabled>
                    <el-option
                      v-for="item in floorOptions"
                      :key="item.id"
                      :label="item.floorName"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6" :xs="24">
                <el-form-item label="所属单元" prop="unitId">
                  <el-select v-model="form.unitId" placeholder="请选择所属单元" @change="getRoomListData" :disabled=disabled>
                    <el-option
                      v-for="item in unitOptions"
                      :key="item.id"
                      :label="item.unitName"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6" :xs="24">
                <el-form-item label="所属房屋" prop="roomId">
                  <el-select v-model="form.roomId" placeholder="请选择所属房屋" @change="changeRoom" :disabled=disabled>
                    <el-option
                      v-for="item in roomOptions"
                      :key="item.id"
                      :label="item.roomNum"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>


              <el-col :span="6" :xs="24">
                <el-form-item label="使用面积" >
                  <el-input v-model="roomForm.roomArea" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="6" :xs="24">
                <el-form-item label="建筑面积" prop="buildArea">
                  <el-input v-model="roomForm.buildArea" disabled />
                </el-form-item>
              </el-col>
            </el-row>
        </fieldset>
        <fieldset style="margin-top: -12px;height: 140px">
          <legend>业主信息</legend>
          <el-row :gutter="20" >
            <el-col :span="16" :xs="24">
              <el-row>
                <el-col :span="8" :xs="24">
                  <el-form-item label="业主类型" prop="customType">
                    <el-radio-group v-model="form.customType"  :disabled="disabled">
                      <el-radio
                        v-for="item in dict.custom_type"
                        :key="item.dictValue"
                        :label="item.dictValue">
                        {{item.dictLabel}}
                      </el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="8" :xs="24" v-if="form.customType=='002'">
                  <el-form-item label="公司名称" prop="corporateName">
                    <el-input v-model="form.corporateName" placeholder="请输入公司名称" :disabled="disabled"/>
                  </el-form-item>
                </el-col>

                <el-col :span="8" :xs="24">
                  <el-form-item :label="form.customType=='001'?'业主名称':'法人名称'" prop="customName">
                    <custom-autocomplete
                      v-model="form.customName"
                      @cv="changeCustomName"
                      optionValue="customName"
                      :value="form.customName"
                      :placeholder="`请输入${form.customType=='001'?'业主名称':'法人名称'}`"
                      :queryParams="{customType:form.customType,communityId:form.communityId}"
                      :disabled="disabled"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8" :xs="24">
                  <el-form-item label="手机号码" prop="cellPhoneNumber">
                    <el-input v-model="form.cellPhoneNumber" placeholder="请输入手机号码" :disabled="disabled"/>
                  </el-form-item>
                </el-col>
                <el-col :span="8" :xs="24" v-if="form.customType=='002'">
                  <el-form-item label="联系地址" prop="contactAddress">
                    <el-input v-model="form.contactAddress" placeholder="请输入联系地址" :disabled="disabled"/>
                  </el-form-item>
                </el-col>
                <el-col :span="8" :xs="24" v-if="form.customType=='002'">
                  <el-form-item label="联系人" prop="contactAddress">
                    <el-input v-model="form.contactAddress" placeholder="请输入联系人" :disabled="disabled"/>
                  </el-form-item>
                </el-col>
                <el-col :span="8" :xs="24">
                  <el-form-item label="身份证号" prop="idCard" v-if="form.customType=='001'">
                    <el-input v-model="form.idCard" placeholder="请输入业主身份证号" :disabled="disabled"/>
                  </el-form-item>
                </el-col>
                <el-col :span="8" :xs="24">
                  <el-form-item label="出生年月" prop="birthDate" v-if="form.customType=='001'">
                    <el-date-picker
                      v-model="form.birthDate"
                      type="date"
                      placeholder="选择出生年月"
                      :disabled="disabled"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8" :xs="24">
                  <el-form-item label="性别" prop="sex" v-if="form.customType=='001'">
                    <el-radio-group v-model="form.sex" :disabled="disabled">
                      <el-radio
                        v-for="item in dict.sys_user_sex"
                        :key="item.dictValue"
                        :label="item.dictValue">
                        {{item.dictLabel}}
                      </el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="6" :xs="24" style="margin-left: 10px">
              <el-form-item label="业主头像">
                <picupload
                  width="120"
                  height="80"
                  title="业主头像"
                  httpRequest="/common/minioUpload"
                  :src.sync="form.customHeadImg"></picupload>
              </el-form-item>
            </el-col>
          </el-row>
        </fieldset>
        <fieldset style="margin-top: -12px">
          <legend>入伙信息</legend>
          <el-row :gutter="20">
            <el-col :span="6" :xs="24">
              <el-form-item label="入伙时间" prop="joinTime">
                <el-date-picker clearable size="small" :disabled="disabled"
                  v-model="form.joinTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择入伙时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6" :xs="24">
              <el-form-item label="购房合同" prop="houseContractNum">
                <el-input v-model="form.houseContractNum" placeholder="请输入购房合同号" :disabled="disabled"/>
              </el-form-item>
            </el-col>
            <el-col :span="6" :xs="24">
              <el-form-item label="收楼书号" prop="bookNum">
                <el-input v-model="form.bookNum" placeholder="请输入收楼书号" :disabled="disabled"/>
              </el-form-item>
            </el-col>
            <el-col :span="6" :xs="24">
              <el-form-item label="通知书" prop="joinNotice">
                <el-input v-model="form.joinNotice" placeholder="请输入通知书" :disabled="disabled"/>
              </el-form-item>
            </el-col>
            <el-col :span="6" :xs="24">
              <el-form-item label="产权证号" prop="propertyRightNumber">
                <el-input v-model="form.propertyRightNumber" placeholder="请输入产权证号" :disabled="disabled"/>
              </el-form-item>
            </el-col>
            <el-col :span="6" :xs="24">
              <el-form-item label="土地证号" prop="landNumber">
                <el-input v-model="form.landNumber" placeholder="请输入土地证号" :disabled="disabled"/>
              </el-form-item>
            </el-col>
            <el-col :span="12" :xs="24">
              <el-form-item label="认证材料" prop="depositPosition" >
                <el-input type="textarea" :rows="1" placeholder="请输入内容" v-model="form.depositPosition" :disabled="disabled"/>
              </el-form-item>
            </el-col>
          </el-row>
        </fieldset>
        <fieldset style="margin-top: -12px">
          <legend>房屋收费标准</legend>
          <room-norm-list ref="normRefs" :roomId="form.roomId" />
        </fieldset>
        <fieldset style="margin-top: -12px">
          <legend>档案信息</legend>
          <join-file-list ref="fileListRef" :joinRegisterId="form.id" :disabled="disabled"/>
        </fieldset>
      </el-form>
      <div slot="footer" class="dialog-footer" style="margin-top: -50px">
        <el-button type="primary" v-if="!disabled" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">{{!disabled?'取 消':'返回'}}</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {getJoinRegister, addJoinRegister, updateJoinRegister} from "@/api/waitress/joinRegister";
  import {orgTreeSelect} from "@/api/system/dept";
  import CustomAutocomplete from "@/views/components/filterable/CustomAutocomplete"
  import { listCustomInfo } from "@/api/waitress/customInfo";
  import JoinFileList from "./joinFileList"
  import RoomNormList from "./roomNormList"

  import { roomMixin } from "@/views/property/houseMange/roomMixin.js"

  export default {
    name: "JoinRegisterFrom",
    dicts: ['custom_type', 'sys_user_sex'],
    mixins:[ roomMixin ],
    components:{CustomAutocomplete,JoinFileList,RoomNormList},
    data() {
      return {
        activeNames:['zichan','yezhu','ruhuo','dangan'],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        //是否禁用
        disabled: false,
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          customName: [
            {required: true, message: "业主名称不能为空", trigger: "blur"}
          ],
          communityId: [
            {required: true, message: "小区信息不能为空", trigger: "blur"}
          ],
          floorId: [
            {required: true, message: "楼栋信息不能为空", trigger: "blur"}
          ],
          unitId: [
            {required: true, message: "单元信息不能为空", trigger: "blur"}
          ],
          roomId: [
            {required: true, message: "房屋信息不能为空", trigger: "blur"}
          ],
          joinTime: [
            {required: true, message: "入伙时间不能为空", trigger: "blur"}
          ],
          cellPhoneNumber: [
            {required: true, message: "手机号不能为空", trigger: "blur"},
            {
              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
              message: "请输入正确的手机号码",
              trigger: "blur"
            }
          ],
          idCard: [
            {required: false, validator: this.checkIDCard, trigger: 'blur'}
          ]
        },
        roomForm:{},
        optionType:'ADD'
      };
    },
    created() {

    },
    methods: {
      show(option) {
        this.reset();
        this.disabled = option.type == 'VIEW'
        this.optionType = option.type
        if (option.type == 'ADD') {
          this.open = true;
          this.title = "新增入伙登记";
          this.initHouseInfo(option.currentNode)
          this.form.joinTime = this.parseTime(new Date(),'{y}-{m}-{d}')
        } else if (option.type == 'UPDATE' || option.type == 'VIEW') {
          getJoinRegister(option.id).then(response => {
            this.form = response.data;
            this.getBuildingData(this.form.communityId)
            this.getUnitList(this.form.floorId)
            this.getRoomListData(this.form.unitId)

            if (option.type == 'VIEW') {
              this.title = "查看入伙登记";
            } else {
              this.title = "修改入伙登记";
            }
            this.open = true;
          });
        }
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
        this.$emit("cancel")
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          communityId: null,
          floorId: null,
          roomId: null,
          unitId:null,
          ownerId: null,
          joinTime: null,
          houseContractNum: null,
          bookNum: null,
          joinNotice: null,
          depositPosition: null,
          propertyRightNumber: null,
          landNumber: null,
          //业主信息
          customId: null, //业主Id
          customType: '001', //业主类型
          sex: '2', //业主性别
          customName: null, //客户姓名
          customHeadImg: null, //客户头像
          cellPhoneNumber: null, //手机号码
          idCard: null, //身份证号
          birthDate: null, //出生日期
          corporateName: null, //公司名称
          contactAddress: null, //联系地址
          linkman: null, //联系人
          joinFileList:[],
          roomNormList:[]
        };
        this.resetForm("form");
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            let roomNormList = this.$refs.normRefs.getRoomNormList()
            if(roomNormList.length > 0){
              for(let i in roomNormList){
                let row = roomNormList[i]
                if(!row.beginChargeTime){
                  this.msgWarning(`收费标准[${row.feeCondition.normNames}],没有维护开始计费时间。`)
                  return false
                }
              }
            }else{
              this.msgWarning("当前房屋没有绑定收费标准,请联系系统管理员绑定房屋收费标准。")
              return false
            }
            this.form.roomNormList = roomNormList
            this.form.joinFileList = this.$refs.fileListRef.getFileLsit()
            if (this.form.id != null) {
              updateJoinRegister(this.form).then(response => {
                this.msgSuccess("修改成功");
                this.cancel()
              });
            } else {
              addJoinRegister(this.form).then(response => {
                this.msgSuccess("新增成功");
                this.cancel()
              });
            }
          }
        });
      },
      changeCustomName(v){
        listCustomInfo({customName : v || -1,customType : this.customType,communityId:this.form.communityId}).then(res=>{
          if(res.rows.length > 0){
            this.form = Object.assign(this.form,{
              customId:res.rows[0].customId,
              customName:res.rows[0].customName,
              customHeadImg:res.rows[0].customHeadImg,
              cellPhoneNumber:res.rows[0].cellPhoneNumber,
              idCard:res.rows[0].idCard,
              birthDate:res.rows[0].birthDate,
              corporateName:res.rows[0].corporateName,
              contactAddress:res.rows[0].contactAddress,
              linkman:res.rows[0].linkman,
              sex:res.rows[0].sex,
            })
          }else{
            this.form = Object.assign(this.form,{
              customId: null,
              customHeadImg: null,
              customName: v,
              cellPhoneNumber: null,
              idCard: null,
              birthDate: null,
              corporateName: null,
              contactAddress: null,
              linkman: null,
              sex:null,
            })
          }
        })
      }
    }
  };
</script>

<style>
  .el-form-item {
    margin-bottom: 14px;
  }
</style>
